<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <caption>个人信息</caption>
    <tr>
        <td>照片:</td>
        <td id="pic_td"></td>
    </tr>
    <tr>
        <td>姓名:</td>
        <td id="name_td"></td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td id="age_td"></td>
    </tr>
    <tr>
        <td>好友:</td>
        <td id="friends_td"></td>
    </tr>
</table>
<button onclick="load()">加载数据</button>
<script>
    function load() {
        //模拟从服务器请求到的数据
        //Person.java        Person p = new Person();
        let p1 = {};//实例化一个空对象
        //JavaScript语言中可以动态的给对象添加属性或方法
        p1.name = "张三";
        p1.age = 18;
        p1.run = function () {
            console.log(this.name + ":" + this.age);
        }
        p1.run();//调用对象的方法
        //实例化一个自带属性方法的对象
        let p2 = {
            name: "李四", age: 18,
            run:function () {
                console.log(this.name + ":" + this.age);
            }
        }
        p2.run();


    }
</script>
</body>
</html>